<template>
  <div class="pana-tab__content">
    <a-table
        :data-source="elementPropertyList"
        :pagination="false"
        size="small"
        bordered
    >
      <a-table-column
          data-index="index"
          title="序号"
          width="50px"
          :custom-render="(text, record, index) => `${index + 1}`"
      />
      <a-table-column
          title="属性名"
          data-index="name"
          width="100px"
      />
      <a-table-column
          title="属性值"
          data-index="value"
          width="100px"
      />
      <a-table-column
          title="操作"
          width="100px"
      >
        <template slot-scope="text, record, index">
          <a-button
              size="small"
              type="link"
              @click="openAttributesForm(record, index)"
          >
            编辑
          </a-button>
          <a-divider type="vertical" />
          <a-button
              size="small"
              type="link"
              style="color: #ff4d4f"
              @click="removeAttributes(record, index)"
          >
            移除
          </a-button>
        </template>
      </a-table-column>
    </a-table>
    <div class="drawer__button">
      <a-button
          size="small"
          block
          type="primary"
          icon="plus"
          @click="openAttributesForm(null, -1)"
      >
        添加属性
      </a-button>
    </div>

    <a-modal
        :visible="propertyFormModelVisible"
        title="属性配置"
        width="600px"
        destroy-on-close
        @close="propertyFormModelVisible = false"
    >
      <a-form-model
          ref="attributeFormRef"
          v-model="propertyForm"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
      >
        <a-form-model-item
            label="属性名："
            prop="name"
        >
          <a-input
              v-model="propertyForm.name"
              allow-clear
          />
        </a-form-model-item>
        <a-form-model-item
            label="属性值："
            prop="value"
        >
          <a-input
              v-model="propertyForm.value"
              allow-clear
          />
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button
            size="small"
            @click="propertyFormModelVisible = false"
        >
          取 消
        </a-button>
        <a-button
            size="small"
            type="primary"
            @click="saveAttribute"
        >
          确 定
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'Properties',
  inject: {
    prefix: 'prefix',
    width: 'width'
  },
  props: {
    id: String,
    type: String
  },
  data() {
    return {
      elementPropertyList: [],
      propertyForm: {},
      editingPropertyIndex: -1,
      propertyFormModelVisible: false
    }
  },
  watch: {
    id: {
      immediate: true,
      handler(val) {
        val && val.length && this.resetAttributesList()
      }
    }
  },
  methods: {
    resetAttributesList() {
      this.bpmnElement = window.bpmnInstances.bpmnElement
      this.otherExtensionList = [] // 其他扩展配置
      this.bpmnElementProperties =
        this.bpmnElement.businessObject?.extensionElements?.values?.filter(
          (ex) => {
            if (ex.$type !== `${this.prefix}:Properties`) {
              this.otherExtensionList.push(ex)
            }
            return ex.$type === `${this.prefix}:Properties`
          }
        ) ?? []

      // 保存所有的 扩展属性字段
      this.bpmnElementPropertyList = this.bpmnElementProperties.reduce(
        (pre, current) => pre.concat(current.values),
        []
      )
      // 复制 显示
      this.elementPropertyList = JSON.parse(
        JSON.stringify(this.bpmnElementPropertyList ?? [])
      )
    },
    openAttributesForm(attr, index) {
      this.editingPropertyIndex = index
      this.propertyForm = index === -1 ? {} : JSON.parse(JSON.stringify(attr))
      this.propertyFormModelVisible = true
      this.$nextTick(() => {
        if (this.$refs['attributeFormRef']) { this.$refs['attributeFormRef'].clearValidate() }
      })
    },
    removeAttributes(attr, index) {
      const that = this
      this.$confirm({
        title: '提示',
        content: '确认移除该属性吗？',
        onOk() {
          that.elementPropertyList.splice(index, 1)
          that.bpmnElementPropertyList.splice(index, 1)
          // 新建一个属性字段的保存列表
          const propertiesObject = window.bpmnInstances.moddle.create(
            `${that.prefix}:Properties`,
            {
              values: that.bpmnElementPropertyList
            }
          )
          that.updateElementExtensions(propertiesObject)
          that.resetAttributesList()
        }
      })
    },
    saveAttribute() {
      // 新建属性字段
      const newPropertyObject = window.bpmnInstances.moddle.create(
        `${this.prefix}:Property`,
        this.propertyForm
      )

      if (this.editingPropertyIndex === -1) {
        this.bpmnElementPropertyList.push(newPropertyObject)
      } else {
        this.bpmnElementPropertyList.splice(
          this.editingPropertyIndex,
          1,
          newPropertyObject
        )
      }
      // 新建一个属性字段的保存列表
      const propertiesObject = window.bpmnInstances.moddle.create(
        `${this.prefix}:Properties`,
        {
          values: this.bpmnElementPropertyList
        }
      )
      this.updateElementExtensions(propertiesObject)
      this.propertyFormModelVisible = false
      this.resetAttributesList()
    },
    updateElementExtensions(properties) {
      const extensions = window.bpmnInstances.moddle.create(
        'bpmn:ExtensionElements',
        {
          values: this.otherExtensionList.concat([properties])
        }
      )
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
        extensionElements: extensions
      })
    }
  }
}
</script>
